<template>
  <div class="checkbox-group custom-checkbox">
    <label class="checkbox-item" v-for="(item,index) in list" :key="item[option.valueKey]">
      <input @change="changeFn" type="checkbox" :value="option.valueKey=='index'?index:item[option.valueKey]" v-model="selectedValues" />
      <span>{{ item[option.labelKey] ||'' }}
        <span v-if="option.heduiState">
          <span style="color: green;" v-if="!item.heduiState||item.heduiState==1">({{ commonMaps.kaweiHeduiTypeMap[item.heduiState||1].label }})</span>
          <span style="color: red;" v-else>({{ commonMaps.kaweiHeduiTypeMap[item.heduiState||1].label }})</span>
        </span>
      </span>
    </label>
  </div>
</template>
  
  <script>
export default {
  name: "CheckboxGroup",
  props: {
    list: {
      type: Array | Object,
      default: () => [],
    },
    option: {
      type: Object,
      default: ()=>({
        valueKey: "id",
        labelKey: "name",
      }),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    selectedValues: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit("input", newValue);
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    changeFn(e) {
      this.$emit("change", this.selectedValues);
    },
  },
};
</script>
  
  <style scoped lang="scss">
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-item {
  display: inline-flex;
  align-items: center;
  width: auto;
  cursor: pointer;


  > span {
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
  }
}

.checkbox-item input {
  margin-right: 8px;
}
</style>
<style>
/* 设置未选中样式 */
.custom-checkbox input[type="checkbox"] {
  position: relative;
  width: 13px;
  height: 13px;
  line-height: 13px;
  border: 1px solid #949494;
  border-radius: 2px;
  margin-right: 4px;
  cursor: pointer;
  flex-shrink: 0;
  /* 取消默认样式 */
  -webkit-appearance: none;
}
.custom-checkbox input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 0;
  left: 1px;
  width: 10px;
  height: 10px;
  color: #fff;
  text-align: center;
}
/* 设置选中样式 */
.custom-checkbox input[type="checkbox"]:checked {
  background-color: #6c5dd3;
}
</style>